import {onMounted, reactive, ref,unref} from "vue"
import {post} from "@/utils/http"
export function useHttp<T>(url:string,initialParams:any){
    //为什么这里的复杂类型数据不用reactive？
    //因为当使用 reactive 创建一个响应式对象时，Vue 会通过 Proxy 对象来拦截对该对象的访问和修改操作。
    //对 reactive 定义的数据进行整体赋值时，会替换掉原来的响应式对象，而不是更新对象的属性。
    //原来的 Proxy 实例会被丢弃，新的对象不会被 Vue 的响应式系统追踪。
    const dataList=ref<T[]>([]); //用来存表格的
    const loading=ref<boolean>(false);
    const totals=ref<number>(0);
    const pageInfo=reactive({
        page:1,
        pageSize:10
    })
    const loadData=async ()=>{
        loading.value=true;
        //unref  什么时候需要将响应式数据还原为原始数据？
        //1.传递给非响应式上下文   （不支持响应式的外部函数或 API（如第三方库、原生 JavaScript 函数）时）
        //2.解构响应式对象         直接解构响应式对象会导致丢失响应性可以使用 unref 提取原始值后再操作
        //3.API 请求或数据拼接     在向后端发送请求时，通常只需要传递普通对象或原始值，而不需要响应式特性
        //4.计算属性或方法中       计算属性或方法中，如果需要对响应式数据进行复杂的逻辑处理，需用 unref 提取其原始值，以避免不必要的响应式追踪。
        try{
            //initialParams若是响应式数据则会更改，若不是响应式数据也不影响
            const {data:{list,total}}=await post(url,{...unref(initialParams),...pageInfo})
            dataList.value=list;
            totals.value=total;
        }catch(error){
            console.log(error)
        } finally{
            loading.value=false
        } 
    }
    onMounted(()=>{
        loadData()
    })

    const handleSizeChange=(size:number)=>{
        pageInfo.pageSize=size;
        loadData()
    }
    const handleCurrentChange=(page:number)=>{
        pageInfo.page=page;
        loadData()
    }
    const resetPagination=()=>{
        pageInfo.page=1;
        pageInfo.pageSize=10;
        loadData()
    }
    return {
        dataList,
        loading,
        totals,
        pageInfo,
        loadData,
        handleSizeChange,
        handleCurrentChange,
        resetPagination
    }

}